/*
 * @author: Victor
 * @Date: 2021-08-23 11:42:46
 * @LastEditTime: 2021-08-23 16:02:13
 */
$(function () {
  var layer = layui.layer;
  // 1.1 获取裁剪区域的 DOM 元素
  var $image = $('#image');
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview',
  };

  // 1.3 创建裁剪区域
  $image.cropper(options);

  // 点击上传按钮弹出 文件选择对话框
  $('#chooseImg').click(function () {
    $('#file').click();
  });

  $('#file').change(function () {
    // console.log(this == e.target);
    if (this.files.length == 0) {
      return layer.msg('请选择图片文件');
    }
    // 1. 拿到用户选择的文件
    var file = this.files[0];
    // 2. 将文件，转化为路径
    var imgURL = URL.createObjectURL(file);
    // 3. 重新初始化裁剪区域
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', imgURL) // 重新设置图片路径
      .cropper(options); // 重新初始化裁剪区域
  });

  // 点击 确定按钮 上传图片 并更新用户头像
  $('#uploadImg').click(function () {
    var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100,
      })
      .toDataURL('image/png');

    $.ajax({
      method: 'POST',
      url: '/my/update/avatar',
      data: {
        avatar: dataURL,
      },
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('更换头像失败！');
        }
        layer.msg('更换头像成功！');
        window.parent.getUserInfo();
      },
    });
  });
});
